<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
        margin:0;
        padding:0;
    }

    body{
        width:2000px;
        height:2000px;
    }

    #demo3{
        width:400px;
        height:400px;
        border:10px solid red;
        border-width: 10px 20px 30px 40px;
        margin:20px;
    }
  </style>
</head>
<body>
  <div id="demo">ID元素</div>
  <div class="test">class元素</div>
  <div class="test">class元素</div>
  <div class="test">class元素</div>
  <div class="test">class元素</div>
  <ul id="list">
    <li>第1个</li>
    <li>第2个</li>
    <li id="li">
      第3个
      <span>子元素1</span>
      <span>子元素2</span>
    </li>
    <li>第4个</li>
    <li>第5个</li>
  </ul>

  <div id="demo2">操作文本内容 <b>加粗内容</b></div>
  <hr />
  <div id="demo3"></div>
</body>
</html>
<script>
  //通过id来获取元素 单个的 id在页面中唯一的
  var demo = document.getElementById('demo')

  //通过class名称来获取元素，多个元素
  var test = document.getElementsByClassName('test')

  //通过标签名称来获取元素 多个元素
  var list = document.getElementsByTagName('li')

  //可以用id也可以用class
  var one = document.querySelector('#demo')
  var one = document.querySelector('.test')

  //获取多个
  var all = document.querySelectorAll('.test')

  //间接获取元素
  var li = document.getElementById('li')
  
  //获取前一个兄弟
  console.log(li.previousElementSibling)

  //获取下一个兄弟
  console.log(li.nextElementSibling)

  //父元素
  console.log(li.parentElement)

  //获取子元素
  console.log(li.children)

  // 获取第一个子元素
  console.log(li.firstElementChild)

  console.log(li.lastElementChild)


  //追加元素
  var ul = document.getElementById('list')

  //创建一个新元素
  var dom = document.createElement('li')

  //给元素赋值一些文本内容
  dom.innerHTML = '第6个';
  
  //追加元素
  ul.appendChild(dom)

  //删除元素
  ul.removeChild(dom)

  //对元素的内容进行操作
  var demo2 = document.getElementById('demo2')

  //获取内容
  console.log(demo2.innerHTML)
  console.log(demo2.innerText)

  //修改内容 可以嵌套标签
  demo2.innerHTML = '<s>直接修改内容</s>';

  //只能够纯文本操作
  demo2.innerText = '<s>修改内容</s>';

  //操作样式
  demo2.style.color = 'red';
  demo2.style.backgroundColor = 'blue';
  demo2.style['font-size'] = '20px';
  console.log(demo2.style.color)
  
  //获取class列表
  console.log(demo2.className)

  //操作属性

  // 获取属性
  console.log(demo2.getAttribute('id'))
  console.log(demo2.getAttribute('class'))

  //编辑一个属性
  demo2.setAttribute('class', 'test1 test2')
  demo2.setAttribute('index', 123)

  //删除属性
  demo2.removeAttribute('class')


  //data自定义属性
  demo2.dataset.index = 'hello world'

  //获取自定义属性
  console.log(demo2.dataset)


  //盒模型操作
  var demo3 = document.getElementById('demo3')

  //获取元素的宽和高
  console.log(demo3.clientWidth)
  console.log(demo3.clientHeight)

  //获取边框
  console.log(demo3.clientLeft) //border-left
  console.log(demo3.clientTop) //border-top

  //获取外边距
  console.log(demo3.offsetLeft) //margin-left
  console.log(demo3.offsetTop) //margin-top

  //获取滚动条滚动的距离
  document.body.onscroll = function()
  {
    //垂直滚动
    console.log(document.documentElement.scrollTop)
    
    //横向滚动条的值
    console.log(document.documentElement.scrollLeft)
  }

  //鼠标移动的坐标点
  //给页面去绑定鼠标的移动事件 
  document.body.onmousemove = function(e)
  {
    //在事件函数中，我们可以得到一个事件对象 event = e
    console.log(`X轴的坐标：${e.pageX}`)
    console.log(`Y轴的坐标：${e.pageY}`)
  }




  


</script>